<template>
  <div>
    <el-empty description="您当前还未发布过文章哦~" v-if="myArticleList.length < 1">
      <el-link type="success" @click="toPublishArticle">去发布</el-link>
    </el-empty>
    <el-row type="flex"  justify="center" class="my_article_item" v-for="a in myArticleList">
      <el-col :span="22" style="border: 1px solid lightgray;height: 180px;margin-top: 20px" class="my_article_body" >
        <div>
          <h3>{{a.title}}</h3>
        </div>
        <div class="my_article_description">{{a.summary}}</div>
        <div class="my_article_bottom" style="margin-top: 10px">
          <i class="iconfont icon-yanjing" style="color: #5bc65b;">{{a.viewCount}}</i>
          <i class="iconfont icon-shoucang" style="color: #5bc65b;">{{a.collectionCount}}</i>
          <i class="iconfont icon-good" style="color: #5bc65b;">{{a.likeCount}}</i>
          <span class="article_detail" style="display:inline-block;margin-left:150px;color: #5bc65b" @click="showArticleDetail(a.id,userId)">查看></span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5bc65b" @click="modifyArticle(a.id)">修改></span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5bc65b" @click="deleteArticle(a.id)">删除></span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5bc65b" v-if="a.status == 1">已发布</span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #eaec7d" v-if="a.status == 2">待审核</span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: red" v-if="a.status == 3">未通过</span>
          <span class="article_detail" style="display:inline-block;margin-left:10px;color: #5b9fc6" v-if="a.status == 0">草稿</span>
        </div>
      </el-col>
    </el-row>
    <div class="block" style="margin-left: 35%;margin-top: 30px;margin-bottom: 30px">
      <el-pagination
          background
          :hide-on-single-page="true"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyArticles",
  data(){
    return {
      userId:'',
      myArticleList:[],
      pageSize:5,
      currentPage:1,
      total:5,
      option:1
    }
  },

  methods:{
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getMyAllArticles();
    },
    modifyArticle(id){
      this.$router.push({
        path:'/modifyArticle',
        query:{
          articleId:id
        }
      })
    },
    toPublishArticle(){
      this.$router.push({
        path:'/publishArticle',
      })
    },
    getMyAllArticles(){
      console.log(this.userId)
      console.log("----------->")
      let url = 'article/getArticlesByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
        }

      }).then(res=>{
        if (res.data.code == 200){
          this.myArticleList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })

    },
    getMyPublishedArticles(){
      console.log(this.userId)
      console.log("----------->")
      let url = 'article/getArticlesByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
          status:1
        }

      }).then(res=>{
        if (res.data.code == 200){
          this.myArticleList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })

    },
    getMyUnPublishedArticles(){
      console.log(this.userId)
      console.log("----------->")
      let url = 'article/getArticlesByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
          status:0
        }

      }).then(res=>{
        if (res.data.code == 200){
          this.myArticleList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })

    },
    getMyUnPassedArticles(){
      console.log(this.userId)
      console.log("----------->")
      let url = 'article/getArticlesByAuthorIdAndStatus'
      this.$axios.get(url,{
        params:{
          now:this.currentPage,
          size:this.pageSize,
          authorId:this.userId,
        }

      }).then(res=>{
        if (res.data.code == 200){
          this.myArticleList = res.data.data.list;
          this.currentPage = res.data.data.pageNum;
          this.total = res.data.data.total;
          this.pageSize = res.data.data.pageSize;
          console.log(res)
        }
      })

    },
    deleteArticle(articleId){
      this.$confirm('此操作将永久删除文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'article/deleteArticle/'+articleId;
        this.$axios.delete(url)
          .then(res=>{
            if(res.data.code == 200){
              this.$message.success("删除成功")
              this.getMyAllArticles();
            }else{
              this.$message.error("删除失败")
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    showArticleDetail(articleId,authorId){
      this.$router.push({
        path:'/articleDetail',
        query: {
          articleId: articleId,
          authorId: authorId
        }
      });
    }
  },
  created() {
    this.userId = JSON.parse(sessionStorage.getItem('userInfo')).id;
  },
  mounted() {
    this.getMyAllArticles();
  }
}
</script>

<style scoped>
.my_article_body{
  padding: 0 10px;
  border-radius: 4px;
}
.my_article_body h3{
  padding: 8px 20px;
  margin: 0;
  border-bottom: 1px solid lightgray;
}
.my_article_description {
  padding: 8px 20px;
  height: 80px;
  margin: 0;
}
.my_article_bottom {
  padding: 3px 20px;
  border-top: 1px solid lightgray;
  line-height: normal;
}
.my_article_bottom i:not(:first-child) {
  margin-left: 30px;
}
.article_detail:hover {
  /*text-underline:#5bc65b;*/
  text-decoration: underline;
  cursor: pointer;
  color: #f1da7f;;
}
</style>